import React from 'react';
import { connect } from 'dva';
import { Table, Row, Col, Form, Input, Select, Button, Switch, Modal, Popconfirm, message } from 'antd';
import { formatMobile } from '../../../utils/commons';
import Constants  from '../../../utils/Constants';
const FormItem = Form.Item;
const Option = Select.Option;
const R = require("ramda");

const cstFundPool = Form.create()(class CstFundPool extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'cstFundPool/getCstAmtListForPage', payload: { page: Constants.DEFAULT_PAGE } });
    }



    handleSearch = (flag) => {
        let values = this.props.form.getFieldsValue();
        let newPage = this.props.cstFundPool.page;
        if(flag) newPage.page = 1;
        this.props.dispatch({
            type: 'cstFundPool/getCstAmtListForPage',
            payload: {
                ...values,
                page: newPage

            }
        });
    }

    columns = [
        { title: '客户编码', dataIndex: 'customerno', key: 'customerno'},
        { title: '客户名称', dataIndex: 'companyname', key: 'companyname'},
        { title: '账户总额', dataIndex: 'amount', key: 'amount'},
        { title: '可用余额', dataIndex: 'balance', key: 'balance'},
    ];

    render(){
        let formItemLayout = {labelCol: {span: 9}, wrapperCol: {span: 15}};
        let formItemLayout2 = {labelCol: {span: 11}, wrapperCol: {span: 9}};

        let values = this.props.form.getFieldsValue();
        const { getFieldDecorator } = this.props.form;

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.cstFundPool.page.size,
            current: this.props.cstFundPool.page.page,
            total: this.props.cstFundPool.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.cstFundPool.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'cstFundPool/getCstAmtListForPage',
                    payload: {
                        ...values,
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.cstFundPool.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'cstFundPool/getCstAmtListForPage',
                    payload: {
                        ...values,
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={6}><FormItem {...formItemLayout} label={'客户编码'}>{getFieldDecorator('cstNo')(<Input />)}</FormItem></Col>
                    <Col span={6}><FormItem {...formItemLayout} label={'客户名称'}>{getFieldDecorator('cstName')(<Input />)}</FormItem></Col>
                </Row>
                <Row>
                    <Col span={5}>
                        <FormItem {...formItemLayout2} label={'可用余额'}>
                            {getFieldDecorator('beginBalance', {})(
                                <Input style={{width: 130}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={3} style={{ marginLeft: -112 }}>
                        <FormItem  {...formItemLayout2} label={'至'}>
                            {getFieldDecorator('endBalance', {})(
                                <Input style={{width: 130}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={16} style={{ float: 'right' }}>
                        <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this,true)} size={'default'}>查询</Button>
                    </Col>
                </Row>
                <Table rowKey={record => record.id} dataSource={this.props.cstFundPool.list} loading={this.props.loading} columns={this.columns} bordered={true} size={'middle'} scroll={{ x: true }} pagination={pagination} />

            </div>
        );
    }
})


function mapStateToProps(state){
    return{
        loading: state.loading.models.cstFundPool, cstFundPool: state.cstFundPool
    };
}

export default connect(mapStateToProps)(cstFundPool);
